<template>
    <h3>Class样式绑定</h3>
    <p :class="{ 'active': isActive, 'text-danger': hasError }">Class样式绑定对象</p>
    <p :class="classObject">Class样式绑定多个对象</p>
    <p :class="[isActive ? 'active' : '']">Class样式绑定数组-三元运算符</p>
    <p :class="[{ 'active': isActive }, errorClass]">Class样式绑定数组和对象-只能是数组嵌套对象，对象不能嵌套数组</p>
</template>

<script>
export default {
    data() {
        return {
            isActive: true,
            hasError: true,
            classObject: {
                'active': true,
                'text-danger': true
            },
            activeClass: "active",
            errorClass: "text-danger"
        }
    }
}
</script>
<style>
.active {
    font-size: 30px
}

.text-danger {
    color: red;
}
</style>